<template>
  <div class="box">
    <div class="title">订单处理状态统计</div>
    <div class="box-bottom">
      <div ref="chart1" class="chart"></div>
      <div class="middle-left">
        <div v-for="item in 3 " :key="item" class="item">
          <div>XX <span style="color: #868d9b;">个</span></div>
          <div>XX <span style="color: #868d9b;">%</span></div>
        </div>

      </div>
    </div>
  </div>
</template>
<script >
export default {
  name: 'TopLeft',
  mounted() {
    this.echartsInit()
  },
  methods: {
    echartsInit() {
      const trafficWay = [
        {
          name: '未处理',
          value: 10
        },
        {
          name: '进行中',
          value: 39
        },
        {
          name: '已处理',
          value: 17
        }

      ]
      // let trafficWay = dataValue;
      const sum = trafficWay.reduce((cur, pre) => {
        return cur + pre.value
      }, 0)

      const data = []
      const legendData = []
      const legendDataValue = []
      const color = [
        'rgba(176, 78, 242, 1)',
        'rgba(13, 118, 255, 1)',
        'rgba(46, 201, 239, 1)'

      ]

      for (let i = 0; i < trafficWay.length; i++) {
        const name = trafficWay[i].name
        legendDataValue.push(trafficWay[i].value)
        legendData.push(name)
        data.push(
          {
            value: trafficWay[i].value,
            name,
            itemStyle: {
              borderWidth: 0,
              borderRadius: 3,
              color: color[i]
            },
            labelLine: {
              show: true,
              length: 5, // 指示线长度
              length2: 20, // 指示线第二段长度
              smooth: true // 使指示线平滑
            }
          },
          {
            value: sum / 100, // 控制每个环形之间的间隙
            name: '',
            itemStyle: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              color: 'rgba(0, 0, 0, 0)',
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0
            }
          }
        )
      }
      // console.log('data',data);
      const seriesOption = [
        {
          name: '',
          type: 'pie',
          clockwise: false,
          radius: ['40%', '60%'],
          center: ['20%', '50%'],
          emphasis: {
            scale: false
          },
          label: {
            show: false
          },
          data
        }
      ]

      const option = {
        //  backgroundColor: '#021425',
        title: {
          show: false,
          text: name,
          textStyle: {
            color: 'black',
            fontSize: 18,
            padding: [0, 0, 25, 0]
          },
          // x: '40%',
          y: '55%',
          x: '35%' // 设置为居中
          // y: 'center',  // 设置为居中
        },
        color,
        tooltip: {
          show: true
        },
        legend: {
          icon: 'circle',
          itemWidth: 10,
          itemHeight: 5,
          itemStyle: {
            borderWidth: 3
          },
          // orient: 'vertical',
          orient: 'vertical', // 修改为水平排列
          data: legendData,
          bottom: '20%', // 将图例放置在底部
          // left: 'left',
          right: '20%', // 水平居中
          textStyle: {
            color: '#868d9b',
            fontSize: 14,
            padding: [0, 0, 0, 0]
          },
          itemGap: 20 // 图例之间的间隔
        },

        toolbox: {
          show: false
        },
        series: seriesOption
      }

      const myChart = this.$echarts.init(this.$refs.chart1)
      myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.box{
  box-sizing: border-box;
  width: 28.49vw;
  height: 10.156vw;
  padding: 0 1.563vw;
  background-color: var(--el-color-primary-light-9);
  border-radius: 0.26vw;

.title{
margin-top: 1.563vw;
  font-weight: 600;
  font-size: 0.938vw;

}

  .box-bottom{
    .chart{
      //margin-top: 2.083vw;
      width: 12.448vw;
      height: 7.083vw;
    }

    display: flex;
    justify-content: space-between;

    .middle-left{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
      height: 7.083vw;
        padding: 1.563vw 0;

      .item{
        display: flex;
        justify-content: space-between;
        width: 7.813vw;
        font-weight: 600;

        span{
          font-weight: 500;
        }
      }
    }
  }
}
</style>
